<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/date_input.css">
	<link rel="stylesheet" type="text/css" href="../css/common.css">
	<script src="../js/jquery-1.12.3.js"></script>
	<script src="../js/jquery.date_input.pack.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
	<header>
		<a class="navbar-header" href="">
			<img src="../images/ph.png" alt="">
			<div>
				<span>Nifty</span>
			</div>
		</a>
	</header>
	<div class="boxed">
		<div class="menu-wrap">
			<ul>
				<li class="list-header">Navigation</li>
				<li class="active-link">
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				<li/>
				<li class="list-divider"></li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
						<i class="down-list"></i>
					</a>
					<ul class="op-list">
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
					</ul>
				</li>
				<li class="list-header">Components</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
						<i class="down-list"></i>
					</a>
					<ul class="op-list">
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- 内容区域 -->
		<div class="content-container">
			<div class="mask schedule">
				<div class="mask-box">
					<div class="mask-head">
						<h4>学员签到</h4>
						<span></span>
					</div>
					<div class="mask-con">
						<div class="mask-marc">
							<ul>
								<li>
									<span>选择学员:</span>
									<em>导师</em>
								</li>
								<li>
									<span>选择日期:</span>
									<div class="date-box1">
										<input type="text" class="date-input required" readOnly="true" placeholder="请选择日期">
									</div>
								</li>
								<li class="sched-time">
									<span>开始时间:</span>
									<input class="required" type="text" onkeyup="intNum(this)">
									<em>时</em>
									<input class="required" type="text" onkeyup="intNum(this)">
									<em>分</em>
								</li>
								<li class="has-been">
									<div>
										<em>8:30</em>
										<i>-</i>
										<em>10:30</em>	
										<span>已被预约</span>
									</div>
									<div>
										<em>8:30</em>
										<i>-</i>
										<em>10:30</em>	
										<span>已被预约</span>
									</div>
								</li>
								<li>
									<span>选择教室:</span>
									<div class="list-box" choice="mandatory">
										<div class="downbtn">
											<span>选择教室</span>
											<em></em>
										</div>
										<ul class="dropdown-menu">
											<li>测试测试</li>
											<li>我们</li>
											<li>测试测试测试</li>
											<li>asdfasdfsaf	</li>
										</ul>
									</div>
									<b>请选择</b>
								</li>
								<li>
									<span>选择学员:</span>
									<div class="list-box" choice="mandatory">
										<div class="downbtn">
											<span>选择学员</span>
											<em></em>
										</div>
										<ul class="dropdown-menu">
											<li>测试测试</li>
											<li>我们</li>
											<li>测试测试测试</li>
											<li>asdfasdfsaf	</li>
										</ul>
									</div>
									<b>请选择</b>
								</li>
								<li>
									<span>私教类型:</span>
									<div class="list-box" choice="mandatory">
										<div class="downbtn">
											<span>私教课程名称</span>
											<em></em>
										</div>
										<ul class="dropdown-menu">
											<li>测试测试</li>
											<li>我们</li>
											<li>测试测试测试</li>
											<li>asdfasdfsaf	</li>
										</ul>
									</div>
									<b>请选择</b>
								</li>
								<li>
									<span>支付方式:</span>
									<div class="list-box" choice="mandatory">
										<div class="downbtn">
											<span>请选择支付方式</span>
											<em></em>
										</div>
										<ul class="dropdown-menu">
											<li>卡种1</li>
											<li>卡种2</li>
											<li>卡种3</li>
											<li>卡种4</li>
											<li>卡种5</li>
										</ul>
									</div>
									<b>请选择</b>
								</li>
							</ul>
						</div>
					</div>
					<div class="mask-confirm">确认签到</div>
				</div>
			</div>
			<div class="common-tit">
				<h2>张幻想-课表</h2>
				<span>导师列表 > 课表</span>
			</div>
			<div class="cur-list">
				<div class="atten-co at-nb">
					<div class="timea-box">
						<div class="atten-sel">星期一<em></em></div>
						<div>星期二<em></em></div>
						<div>星期三<em></em></div>
						<div>星期四<em></em></div>
						<div>星期五<em></em></div>
						<div>星期六<em></em></div>
						<div>星期日<em></em></div>
					</div>
					<div class="prev-week">上一周</div>
					<div class="next-week">下一周</div>
				</div>
				<div class="curlist-con">
					<div class="scrollbox" id="weekBox">
						<table>
							<thead>
								<tr>
									<th class="master-name">课程名称</th>
									<th class="master-type">课程类型</th>
									<th class="master-time">时间</th>
									<th class="master-class">教室</th>
									<th class="curl-operation">操作</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>jazz初级课</td>
									<td>常规课</td>
									<td>13:00</td>
									<td>A2-3</td>
									<td class="curl-operation">
										<span>[</span>
										<em class="mas-det">查看详情</em>
										<span>]</span>
									</td>
								</tr>
								<tr>
									<td>jazz初级课</td>
									<td>常规课</td>
									<td>13:00</td>
									<td>A2-3</td>
									<td class="curl-operation">
										<span>[</span>
										<em class="mas-det">查看详情</em>
										<span>]</span>
									</td>
								</tr>
								<tr>
									<td>jazz初级课</td>
									<td>常规课</td>
									<td>13:00</td>
									<td>A2-3</td>
									<td class="curl-operation">
										<span>[</span>
										<em class="mas-det">查看详情</em>
										<span>]</span>
									</td>
								</tr>
								<tr>
									<td>jazz初级课</td>
									<td>常规课</td>
									<td>13:00</td>
									<td>A2-3</td>
									<td class="curl-operation">
										<span>[</span>
										<em class="mas-det">查看详情</em>
										<span>]</span>
									</td>
								</tr>
							</tbody>
						</table>
						<!-- 2 -->
						<table>
							<thead>
								<tr>
									<th class="master-name">课程名称</th>
									<th class="master-type">课程类型</th>
									<th class="master-time">时间</th>
									<th class="master-class">教室</th>
									<th class="curl-operation">操作</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>jazz初级课</td>
									<td>常规课</td>
									<td>13:00</td>
									<td>A2-3</td>
									<td class="curl-operation">
										<span>[</span>
										<em class="mas-det">查看详情</em>
										<span>]</span>
									</td>
								</tr>
								<tr>
									<td>jazz初级课</td>
									<td>常规课</td>
									<td>13:00</td>
									<td>A2-3</td>
									<td class="curl-operation">
										<span>[</span>
										<em class="mas-det">查看详情</em>
										<span>]</span>
									</td>
								</tr>
								<tr>
									<td>jazz初级课</td>
									<td>常规课</td>
									<td>13:00</td>
									<td>A2-3</td>
									<td class="curl-operation">
										<span>[</span>
										<em class="mas-det">查看详情</em>
										<span>]</span>
									</td>
								</tr>
								<tr>
									<td>jazz初级课</td>
									<td>常规课</td>
									<td>13:00</td>
									<td>A2-3</td>
									<td class="curl-operation">
										<span>[</span>
										<em class="mas-det">查看详情</em>
										<span>]</span>
									</td>
								</tr>
							</tbody>
						</table>
						<!-- 3 -->
						<table>
							<thead>
								<tr>
									<th class="master-name">课程名称</th>
									<th class="master-type">课程类型</th>
									<th class="master-time">时间</th>
									<th class="master-class">教室</th>
									<th class="curl-operation">操作</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>jazz初级课</td>
									<td>常规课</td>
									<td>13:00</td>
									<td>A2-3</td>
									<td class="curl-operation">
										<span>[</span>
										<em class="mas-det">查看详情</em>
										<span>]</span>
									</td>
								</tr>
								<tr>
									<td>jazz初级课</td>
									<td>常规课</td>
									<td>13:00</td>
									<td>A2-3</td>
									<td class="curl-operation">
										<span>[</span>
										<em class="mas-det">查看详情</em>
										<span>]</span>
									</td>
								</tr>
								<tr>
									<td>jazz初级课</td>
									<td>常规课</td>
									<td>13:00</td>
									<td>A2-3</td>
									<td class="curl-operation">
										<span>[</span>
										<em class="mas-det">查看详情</em>
										<span>]</span>
									</td>
								</tr>
								<tr>
									<td>jazz初级课</td>
									<td>常规课</td>
									<td>13:00</td>
									<td>A2-3</td>
									<td class="curl-operation">
										<span>[</span>
										<em class="mas-det">查看详情</em>
										<span>]</span>
									</td>
								</tr>
							</tbody>
						</table>
						<!-- 4 -->
						<table>
							<thead>
								<tr>
									<th class="master-name">课程名称</th>
									<th class="master-type">课程类型</th>
									<th class="master-time">时间</th>
									<th class="master-class">教室</th>
									<th class="curl-operation">操作</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>jazz初级课</td>
									<td>常规课</td>
									<td>13:00</td>
									<td>A2-3</td>
									<td class="curl-operation">
										<span>[</span>
										<em class="mas-det">查看详情</em>
										<span>]</span>
									</td>
								</tr>
								<tr>
									<td>jazz初级课</td>
									<td>常规课</td>
									<td>13:00</td>
									<td>A2-3</td>
									<td class="curl-operation">
										<span>[</span>
										<em class="mas-det">查看详情</em>
										<span>]</span>
									</td>
								</tr>
								<tr>
									<td>jazz初级课</td>
									<td>常规课</td>
									<td>13:00</td>
									<td>A2-3</td>
									<td class="curl-operation">
										<span>[</span>
										<em class="mas-det">查看详情</em>
										<span>]</span>
									</td>
								</tr>
								<tr>
									<td>jazz初级课</td>
									<td>常规课</td>
									<td>13:00</td>
									<td>A2-3</td>
									<td class="curl-operation">
										<span>[</span>
										<em class="mas-det">查看详情</em>
										<span>]</span>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="../js/common.js"></script>
	<script>
		(function() {
			$(".date-input").date_input();
			var showDay;
			var a = new Date().getDay();
			$(".timea-box div").removeClass("atten-sel");
			switch(true) {
				case a == 0: showDay = 6;break;
				case a == 1: showDay = 0;break;
				case a == 2: showDay = 1;break;
				case a == 3: showDay = 2;break;
				case a == 4: showDay = 3;break;
				case a == 5: showDay = 4;break;
				case a == 6: showDay = 5;break;
			};
			// console.log(showDay);
			$(".timea-box div").eq(showDay).addClass("atten-sel");
			$("#weekBox table").eq(showDay).css({
				"display" : "table"
			});
			operaShow(showDay);
			var num = 0;
			$(".prev-week").on("click", function() {
				num --;
				if (num < -1) {
					num == -1
				};
				if (num == -1) {
					$(".prev-week").css({
						"display" : "none"
					})
				} else {
					$(".prev-week").css({
						"display" : "block"
					})
				}
				$(".next-week").css({
					"display" : " block"
				});
				// 再此加入 加载上一周
				$(".timea-box div").removeClass("atten-sel");
				$(".timea-box div").eq(0).addClass("atten-sel");
				$("#weekBox table").eq(0).css({
					"display" : "table"
				}).siblings().css({
					"display" : "none"
				});
				operaShow(0);
			});
			$(".next-week").on("click", function() {
				num ++;
				if (num > 1) {
					num == 1
				};
				if (num == 1) {
					$(".next-week").css({
						"display" : "none"
					})
				} else {
					$(".next-week").css({
						"display" : "block"
					});
				}
				$(".prev-week").css({
					"display" : " block"
				});
				// 再此加入 加载下一周
				$(".timea-box div").removeClass("atten-sel");
				$(".timea-box div").eq(0).addClass("atten-sel");
				$("#weekBox table").eq(0).css({
					"display" : "table"
				}).siblings().css({
					"display" : "none"
				});
				operaShow(0);
			});
		})();
		$(".timea-box div").on("click", function() {
			$(".timea-box div").removeClass("atten-sel");
			$(this).addClass("atten-sel");
			$(".curlist-con").eq($(this).index()).addClass("sel-curl").siblings().removeClass("sel-curl");
			$("#weekBox table").eq($(this).index()).css({
				"display" : "table"
			}).siblings().css({
				"display" : "none"
			});
			operaShow($(this).index());
		})
		// 弹窗
		// operaShow();
		function operaShow(sNum) {
			$("#weekBox table").eq(sNum).find(".mas-det").on("click", function() {
				$(".schedule").css({
					"display" : "block"
				});
				$(".schedule .mask-box").css({
					"margin-top" : -($(".schedule .mask-box").height() + parseInt($(".schedule .mask-box").css("padding-bottom")))/2
				})
			});
		}
		$(".mask-head span").on("click", function() {
			$(this).parent().parent().find("input").val("");
			$(".mask").css({
				"display" : "none"
			})
		})
		$(".schedule .mask-confirm").on("click", function() {
			var schT = true;
			for (var i = 0; i < $(".schedule .list-box").length; i++) {
				if ($($(".schedule .list-box")[i]).attr("choice") == "mandatory") {
					schT = false;
					$($(".schedule .list-box")[i]).next("b").css({
						"display" : "inline"
					});
				};
			};
			if ($(".sched-time").find("input").eq(0).val() == "" || Number($(".sched-time").find("input").eq(0).val()) > 23) {
				$(".sched-time").find("input").eq(0).css({
					"border" : "1px solid #ff5a60"
				});
				schT = false;
			} else {
				$(".sched-time").find("input").eq(0).css({
					"border" : "1px solid #cccdd9"
				});
			};
			if ($(".sched-time").find("input").eq(1).val() == "" || Number($(".sched-time").find("input").eq(1).val()) > 59) {
				$(".sched-time").find("input").eq(1).css({
					"border" : "1px solid #ff5a60"
				});
				schT = false;
			} else {
				$(".sched-time").find("input").eq(1).css({
					"border" : "1px solid #cccdd9"
				});
			};
			if ($(".schedule .date-input").val() == "") {
				$(".schedule .date-input").css({
					"border" : "1px solid #ff5a60"
				});
				schT = false;
			} else {
				$(".schedule .date-input").css({
					"border" : "1px solid #cccdd9"
				});
			};
			if (schT) {
				$(".mask").css({
					"display" : "none"
				})
			};
		});
	</script>
</body>
</html>